{% extends "auth-menu.html" %}
{% load tag %}
{% block head %}

{#  没有需要加载的文件#}
 {% endblock %}

{% block display %}
    "display: block"
{% endblock %}

{% block active %}
    'active'
{% endblock %}

{% block active_sub2 %}
    'active'
{% endblock %}

{% block main %}
   <div class='span12'>
        <div class='page-header'>
            <h1 class='pull-left'>
                <i class='icon-edit'></i>
                <span>接口获取频次</span>
            </h1>
            <div class='pull-right'>
                <ul class='breadcrumb'>
                    <li>
                        <a href="/index"><i class='icon-bar-chart'></i>
                        </a>
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li>
                        接口获取
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li class='active'>接口获取频次</li>
                </ul>
            </div>
        </div>
    </div>

<form accept-charset="UTF-8" class="navbar-search pull-left hidden-phone" method="get" />
    <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
    时间： <input type="text"  value="{{ date }}" name="date" id="datetimepicker"  />
      客户名：  <input type="text" name="kehu" value={{ kehu }} />
          数据版本：
                        <select id='inputSelect' name="version">
                            <option {{ select_16q2 }}/>16Q2
                            <option {{ select_15q4 }}/>15Q4
                            <option {{ select_dti }}/>DTI
                        </select>
<button class="btn btn-link icon-search" name="button" type="submit"></button>
{#<input autocomplete="off" class="search-query span2" id="q_header" name="q" placeholder="Search..." type="text" value="" />#}
</form>
{#        {% for i in item %}#}
{#        {% print i.title %}#}
{#            {{ i.data }}#}
{#    {% endfor %}#}

<div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var Chart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
//设置数据
option = {
    timeline: {
        data: [ '2002-01-01 00:00',
            '2002-01-01 01:00','2002-01-01 02:00','2002-01-01 03:00','2002-01-01 04:00','2002-01-01 05:00',
            '2002-01-01 06:00','2002-01-01 07:00','2002-01-01 08:00','2002-01-01 09:00',
           '2002-01-01 10:00','2002-01-01 11:00','2002-01-01 12:00','2002-01-01 13:00','2002-01-01 14:00',
            '2002-01-01 15:00','2002-01-01 16:00','2002-01-01 17:00','2002-01-01 18:00','2002-01-01 19:00',
            '2002-01-01 20:00','2002-01-01 21:00','2002-01-01 22:00','2002-01-01 23:00'
        ],
         label: {
            formatter: function (s) {
            return s.slice(10,13);
            }
            },
        autoPlay: true,
        playInterval: 1000
         },
    options: [
        {

        tooltip: {'trigger': 'axis'},
        legend: {
            x: 'right',
            padding: 0,                             // 图例内边距，单位px，默认上下左右内边距为5
          itemGap: 5,
            'data': {{ x|json_data|safe }},
{#            'selected': {{ selected|json_data|safe }}#}
                },
        toolbox: {
            'show': true,
            orient: 'vertical',
            x: 'right',
            y: 'center',
            'feature': {
            'mark': {'show': true},
            'dataView': {'show': true, 'readOnly': false},
            'magicType': {'show': true, 'type': ['line', 'bar', 'stack', 'tiled']},
            'restore': {'show': true},
            'saveAsImage': {'show': true}
                            }
                    },
        calculable: true,
        grid: {'y': 80, 'y2': 100},
        xAxis: [{
            'type': 'category',
            'axisLabel': {'interval': 0},
            'data': ["5","10","15","20","25","30","35","40","45","50","55","60"],
        }],
        yAxis: [
                {
            'type': 'value',
            'name': '次数',
        {#                    'max': 53500#}
        },

        ],
            title: {
            'text': {{ first_text|json_data|safe }},
            'subtext': '数据来自访问日志'
        },
{#   第一页的格式，后面的每页都会继承，第一页比较特殊#}
        series:[
            {% for i in firstdata %}

        {
        'name': "{{ i.name }}",
        'type': 'bar',
        'markLine': {
        'data': [{'type': 'max', 'name': '最大值'}]
                            },
        'data': {{ i.data }}
                        },
            {% endfor %}
 ]

        },
{% for i in item %}
{
title: {'text':  {{ i.title|json_data|safe }}  },
series: {{ i.data|json_data|safe }}
        },
        {% endfor %}

    ]
};
{#        // 使用刚指定的配置项和数据显示图表。#}
Chart.setOption(option);
</script>
{% endblock %}

{% block script %}
{#<script src="/bootstrap/js/jquery.js"></script>#}

<script>

$.datetimepicker.setLocale('ch');

{#$('#datetimepicker_format').datetimepicker({format: $("#datetimepicker_format_value").val()});#}
{#console.log($('#datetimepicker_format').datetimepicker('getValue'));#}

$("#datetimepicker_format_change").on("click", function(e){
	$("#datetimepicker_format").data('xdsoft_datetimepicker').setOptions({format: $("#datetimepicker_format_value").val()});
});
$("#datetimepicker_format_locale").on("change", function(e){
	$.datetimepicker.setLocale($(e.currentTarget).val());
});

$('#datetimepicker').datetimepicker({
dayOfWeekStart : 1,
lang:'ch',
timepicker:false,
format:"Y-m-d",
{#disabledDates:['1986/01/08','1986/01/09','1986/01/10'],#}
{#startDate:	'1986/01/05'#}
});
{#$('#datetimepicker').datetimepicker({value:{{ date|date:"Y-m-d H:i" }}, step:10});#}
{#$('#datetimepicker').datetimepicker({ step:10});#}
</script>

{% endblock %}